ボタン Button UI
ボタン ButtonのUI
目的
ユーザーにアクションしてもらうことを促す
代替手段
Link リンク UI
種類
Text Buttons
https://link.medium.com/8rxoXBnYm6
Ghost Button
Raised buttons
FAB Floating Action Button
Check boxe チェックボックス UI
Radio Button ラジオボタン
Select セレクト UI
Toggle トグル Switch スイッチ UI
CTA button
Share button
Dropdown button
Hamburger button
Plus button
Expendable button
押しやすさ
カーソル系デバイス
ホバー Hover UI
タッチデバイス
見た目で押すことを促す必要あり
カーソルが存在しないため、ホバー Hover UIを使えない
三次元 UI
Shadow 影 UI
フラットデザイン Flat Designよりの影付きボタンもある
Material Design
底部にうっすら付ける感じ
Position 配置 UI
見つけやすい
押しやすい
関連情報との距離
他のボタンとの距離感
置く順番
人間は左から右に見る
https://uxplanet.org/buttons-alignment-policy-a26de4ce0c70
Text 文字 UI
機能・アクションとテキスト内容の一致
Imperative: save
Suggestive: click here or'learn more
Icon アイコン UI
Icon アイコン使うのも効果的
Icon アイコンのみ or Text テキストと併用
spanで括るのが良さそう
Color 色 UI
機能・アクションを想起する色彩 Color
ゴーストボタン
白抜きしたようなやつ
背景を考慮
エラー?Alert?
どんな名前が良いの?
Size サイズ UI
他情報と比較した重要さ
Hit Target タッチ範囲 UI
人の指が押せるかどうか
マイクロインタラクション Micro Interaction
本当に重要なものだけ
形状 Shape UI
丸みがある
親しみやすさ
テキストに注目しやすい
クリック後
参考
💯UI Design in Practice Series: Buttons and Selection controls
💯UI Design: Basic Types of Buttons in User Interfaces | Tubik Studio
Button Design essentials for your Web UI | Swapps
💰UI cheat sheets: buttons - UX Collective
https://medium.com/@uxmovement/5-techniques-to-make-mobile-call-to-action-buttons-intuitive-a4d0bb49b212
https://www.nngroup.com/articles/state-switch-buttons/
リンク機能を持つ Button UI を賢く正しく実装するテクニック – PSYENCE:MEDIA
リンク linkかButtonかの議論よかった